<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body onload="onLoad()">
    <div id="templatecode"></div>
    <br />
    <br />
    <br />
    <div id="code"></div>
    <br />
    <br />
    <br />
    <div id="data"></div>
    <br />
    <br />
    <br />
    <div id="result"></div>
    <br />
    <br />
    <br />
    <div id="view">


    </div>
    <input type="button" value="onLoad" onclick="onLoad()" />
    <script src="template/JsTemplate.js"></script>
    <script>


        function onLoad() {
            var templatecontent = document.getElementById("template").innerHTML;

            document.getElementById("templatecode").innerText = templatecontent;
            var code = JSTemplate.getFuncCode(templatecontent);
            document.getElementById("code").innerText = code;
            var data = {
                time:new Date().getTime(),
                users: [
                    {
                        name: "张三1",
                        gender: 0,
                        number: "1001"
                    },
                    {
                        name: "李四2",
                        gender: 1,
                        number: "1002"
                    },
                    {
                        name: "张三3",
                        gender: 0,
                        number: "1003"
                    },
                    {
                        name: "张三4",
                        gender: 0,
                        number: "1004"
                    },
                    {
                        name: "张三5",
                        gender: 0,
                        number: "1005"
                    },
                    {
                        name: "李四7",
                        gender: 1,
                        number: "1006"
                    }
                ]
            }

            var result = JSTemplate.rendData(templatecontent, data);
            console.log(result);

            document.getElementById("data").innerText = JSON.stringify(data);
            document.getElementById("result").innerText = result;
            document.getElementById("view").innerHTML = result;
            
        }

    </script>
    <script type="text/template" id="template">
        <h3>{data.time} 总共：{{{data.users.length}}}</h3>
        <table>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>学号</th>
            </tr>
            {each index,value data.users}
            <tr {if index%2==1}style="background:#dddddd;"{/if}>
                <td>{parseInt(index)+1}</td>
                <td>{value.name}</td>
                <td>{value.gender==0?"男":"女"}</td>
                <td>{value.number}</td>
            </tr>
            {/each}
        </table>
    </script>
</body>

</html>